<template>
	<div class="layuimini-container">
	    <div class="layuimini-main">
			<el-row>
				<el-col :span="24">
					<fieldset class="table-search-fieldset">
					    <legend>搜索信息</legend>
					    <div style="margin: 10px 10px 10px 10px">
					        <form class="layui-form layui-form-pane" action="">
					            <div class="layui-form-item">
					                <div class="layui-inline">
					                    <label class="layui-form-label">学号</label>
					                    <div class="layui-input-inline">
					                        <input type="text" name="nickName" autocomplete="off" class="layui-input">
					                    </div>
					                </div>
									<div class="layui-inline">
									    <label class="layui-form-label">姓名</label>
									    <div class="layui-input-inline">
									        <input type="text" name="phone" autocomplete="off" class="layui-input">
									    </div>
									</div>
					                <div class="layui-inline">
					                    <label class="layui-form-label">性别</label>
					                    <div class="layui-input-inline">
					                        <input type="text" name="sex" autocomplete="off" class="layui-input">
					                    </div>
					                </div>
					                <div class="layui-inline">
					                    <label class="layui-form-label">邮箱</label>
					                    <div class="layui-input-inline">
					                        <input type="text" name="email" autocomplete="off" class="layui-input">
					                    </div>
					                </div>
					                <div class="layui-inline">
					                    <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
					                </div>
									<div class="layui-inline">
									   <button type="button" class="layui-btn layui-btn-normal  data-add-btn" @click="drawer=true" lay-event="add"> 导入 </button>
									</div>
					            </div>
					        </form>
					    </div>
					</fieldset>
					<script type="text/html" id="toolbarDemo">
					    <div class="layui-btn-container">
					        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
					    </div>
					</script>
					<el-drawer
					  title="我是标题"
					   :visible.sync="drawer"
					   size="18%">
					  <el-upload
					    class="upload-demo"
					    drag
						:on-success="handlePreview"
						:on-error="handleRemove"
						accept=".xlsx"
					    action="http://localhost:8082/userAwait/importMemberList"
					    multiple>
					    <i class="el-icon-upload"></i>
					    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
					  </el-upload>
					</el-drawer>

					<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
					
					
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script type="text/html" id="currentTableBar">
					    <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">打分</a>
					    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
					</script>
<script>
	import dept from '@/api/system/manage/dept.js'
	import userAwaitApi from '@/api/system/userAwait.js'
	import mark from "./mark.vue"
	export default {
		 data() {
		      return {
				fileList: [],
		        deptData: [{
					id:0,
					label:"全部"
				}],
		        defaultProps: {
		          children: 'children',
		          label: 'label'
		        },
				selectData:{
					nickName:'',
					phone:'',
					sex:'',
					email:''
				},
				drawer:false
		      };
		    },
		mounted() {
			this.initial()
		},
		methods:{
			submitUpload() {
              this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
              console.log(file, fileList);
            },
            handlePreview() {
               layui.use(['form', 'table'], function () {
                   var $ = layui.jquery,
                       form = layui.form,
                       table = layui.table;
               	//执行搜索重载
               	table.reload('currentTableId', {
               	    page: {
               	        curr: 1
               	    }
               	    , where: {
               	    }
               	}, 'data');	
               	return false;
               })
            },
			handleNodeClick(res){
				console.log(res)
			},
			initial(){
				var url =  process.env.VUE_APP_BASE_API
				layui.use(['form', 'table'], function () {
					
				    var $ = layui.jquery,
				        form = layui.form,
				        table = layui.table;
						
					table.render({
					    elem: '#currentTableId',
						url: url+"/userAwait/getUserAwait",
					    toolbar: '#toolbarDemo',
					    defaultToolbar: ['filter', 'exports', 'print', {
					        title: '提示',
					        layEvent: 'LAYTABLE_TIPS',
					        icon: 'layui-icon-tips'
					    }],
						response: {
							statusCode: 200,
							dataName: 'list' //数据列表的字段名称，默认：data
						},
					    cols: [[
					        {type: "checkbox", width: 50},
							{field: 'id',  title: '学号', sort: false,hide:true},
					        {field: 'userCode', width: 140, title: '学号', sort: true},
					        {field: 'name', width: 160, title: '用户名'},
					        {field: 'sex', width: 120, title: '性别'},
							{field: 'college', width: 180, title: '学院'},
							{field: 'specialty', title: '专业', Width: 60, sort: true},
							{field: 'schoolClass', title: '班级', Width: 120, sort: true},
					        {field: 'mail', title: '邮箱', Width: 100, sort: true},
					        {field: 'feature', width: 180, title: '特长', sort: true},
					        {field: 'phone', width: 160, title: '手机号', sort: true},
					        {field: 'createYear', width: 120, title: '加入年份'},
					        {field: 'remark', width: 120, title: '备注', sort: true},
							{field: 'prepare1', width: 60, title: '备用字段', sort: true},
							{field: 'prepare2', width: 60, title: '备用字段', sort: true},
					        {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
					    ]],
					    limits: [10, 15, 20, 25, 50, 100],
					    limit: 15,
					    page: true,
					    skin: 'line'
					});
				    // 监听搜索操作
				    form.on('submit(data-search-btn)', function (data) {
				        //执行搜索重载
				        table.reload('currentTableId', {
				            page: {
				                curr: 1
				            }
				            , where: {
				                nickName: vm.selectData.nickName,
								phone:vm.selectData.phone,
								sex:vm.selectData.sex,
								email:vm.selectData.email
				            }
				        }, 'data');
				
				        return false;
				    });
				
				    /**
				     * toolbar监听事件
				     */
				    table.on('toolbar(currentTableFilter)', function (obj) {
						
				        if (obj.event === 'add') {  // 监听添加操作
				            this.drawer=true
				        } else if (obj.event === 'delete') {  // 监听删除操作
				            var checkStatus = table.checkStatus('currentTableId')
				                , data = checkStatus.data;
							console.log(data)
							var ids = []
							data.forEach(res=>{
								ids.push(res.id)
							})	
							var data = {
								ids : ids
							}
							userAwaitApi.deleteIds(data)	
							
							table.reload('currentTableId', {
							    page: {
							        curr: 1
							    }
							    , where: {
							        nickName: vm.selectData.nickName,
							        phone:vm.selectData.phone,
							        sex:vm.selectData.sex,
							        email:vm.selectData.email
							    }
							}, 'data');
							return true				
				        }
				    });
				
				    //监听表格复选框选择
				    table.on('checkbox(currentTableFilter)', function (obj) {
				        console.log(obj)
				    });
				
				    table.on('tool(currentTableFilter)', function (obj) {
				        var data = obj.data;
				        if (obj.event === 'edit') {
				            var index = layer.open({
				                title: '编辑用户',
				                type: 2,
				                shade: 0.2,
				                maxmin:true,
				                shadeClose: true,
				                area: ['70%', '70%'],
				                content: './mark.vue',
				            });
				            $(window).on("resize", function () {
				                layer.full(index);
				            });
				            return false;
				        } else if (obj.event === 'delete') {
				            layer.confirm('真的删除行么', function (index) {
				                obj.del();
								var datas = {
									id : data.id
								}
								userAwaitApi.delete(datas)
				                layer.close(index);
				            });
				        }
				    });
				
				});
			}
			// getDept(){
			// 	dept.list().then(res=>{
			// 		if(res.code==200){
			// 			this.deptData = [...this.deptData, ...this.getNest(res.list)]
			// 		}
			// 	})
			// },
			// getNest(res){
			// 	var deptList = []
			// 	var list = {}
			// 	res.forEach((data,index)=>{
			// 		list.label=data.name
			// 		list.id=data.id
			// 		if(data.dept.length!=0){
			// 			list.children=this.getNest(data.dept)
			// 		}
			// 		deptList.push(list)
			// 		list={}
			// 	})
			// 	return deptList
			// }
		    
		}
	}
</script>

<style>
	.upload-demo{
		width: 100%;
		padding: 30px;
	}
	.upload-demo .el-upload-dragger{
		width: 45hui0px;
	}
</style>
